<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构内容 头部 -->
      <el-card class="tree-card">
        <!-- 左边 -->
        <TreeTools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- :default-expand-all="true"  将树形数据全部展开 -->
        <el-tree :data="departs" :props="djxjh" :default-expand-all="true">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="{data}" data 每个节点的数据对象-->
          <!-- 子组件传递过来的自定义事件，再一次触发父组件的getDepart方法 重新获取企业部门列表 -->
          <TreeTools
            slot-scope="{data}"
            :tree-node="data"
            @delDepts="getDepart"
            @addDepts="addDepts"
            @editDepts="editDepts"
          />
        </el-tree>
      </el-card>
    </div>
    <!-- 新增部门弹出层 组件  -->
    <!-- 此组件的是否显示不需要在这里进行v-if的判断 因为它自带:visible属性控制本身的显示与否 我们只需在父组件传递一个布尔值即可 -->
    <addDept ref="addDept" :is-showdialog.sync="isShowdialog" :tree-node="nodes" @addDepts="getDepart" />
    <!-- .sync修饰符 只要用sync修饰，就可以省略子组件向父组件通信时的监听和方法，直接将值赋值给showDialog -->

  </div>
</template>

<script>
import { getDepartments } from '@/api/departments.js'
import TreeTools from './components/tree-tools.vue'
import { tranListToTreeData } from '@/utils/index.js'
import addDept from './components/add-dept'

export default {
  name: '',
  components: {
    TreeTools,
    addDept
  },
  data() {
    return {
      company: { name: '阿里巴巴（中国）网络技术有限公司（ Alibaba.com ）', manager: '负责人' }, // 头部的数据结构
      departs: [], // 下面部分TreeTools组件的数据 下面虽然只写了一个TreeTools组件 实际上有四个 有多少个节点就循环了多少次
      djxjh: {
        label: 'name', // 'label'表示从这个属性显示内容
        children: 'children' // 'children'从这个属性去找子节点 就是二级展开那个
      },
      isShowdialog: false, // 是否显示 新增部门弹出层
      nodes: null
    }
  },
  created() {
    this.getDepart()
  },
  methods: {
    async getDepart(flag) { // 调用获取企业列表的接口函数 渲染页面
      const result = await getDepartments()
      console.log(result)
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(result.depts, '')
    },

    addDepts(nodes) {
      this.isShowdialog = true
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.nodes = nodes
    },

    editDepts(nodes) {
      this.isShowdialog = true
      this.nodes = nodes
      // console.log(nodes)
      // this.refs.addDept 拿到add-dept组件实例
      this.$refs.addDept.getDepartment(this.nodes.id)
    }
  }
}
</script>

<style scoped>
.tree-card{
  padding: 30px 140px;
  font-size: 14px;
}
</style>
